<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字溢出背景处理</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .single{
            border:1px solid red;
            width:250px;
            height:20px;
            /* 溢出容器，打点展示 三件套  特别提示，对inline元素没用*/
            white-space:nowrap; /*white-space 属性设置如何处理元素内的空白。nowrap文本不会换行*/
            text-overflow:ellipsis;
            overflow:hidden;
        }
        .multi-line{
            width:300px;
            height:3.6rem;
            border:1px solid black;
            line-height: 1.2rem;
            overflow:hidden;
        }
    </style>
</head>
<body>
<!-- 溢出容器，打点展示
      1.单行文本 技术实现
      2.多行文本 技术不好实现，百度都是手工操作 
-->
    <p class="single">李亚鹏官宣新恋情后一家三口首同框，李嫣在海哈金喜面前显拘谨，后妈不好当</p>
    <p class="multi-line" id="line">初代史莱克七怪，之所以叫史莱克七怪，有几个原因：一个是因为他们是出身史莱克学院的怪物天才，然后就是因为当时整个学院也只有他们七个人而已；而最重要，也是令史莱克学院为之扬名的，就是他们代表学院所参加的那一场全大陆高级魂师学院精英大赛。</p>

</body>
</html>